<template>
  <div>
    <!-- 输入框组件 -->
    <!-- 把子组件input组件传递过来的事件和参数做一下绑定 -->
    <!-- todoinput => 通过ref属性绑定子组件拿到子组件dom里的节点 -->
    <todo-input @changeContent="changeContent" ref="todoInput"></todo-input>
    <!-- 增加按钮 -->
    <!-- addTodo => 绑定子组件发送过来的事件 -->
    <todo-button @addTodo="addTodo"></todo-button>
  </div>
</template>

<script>
import TodoInput from "./TodoInput.vue";
import TodoButton from "./TodoButton.vue";

export default {
  name: "TodoHeader",
  components: {
    TodoInput,
    TodoButton,
  },
  data() {
    return {
      content: "",
    };
  },
  methods: {
    //子组件传递的输入框内容并保存在当前组件里
    changeContent(content) {
      this.content = content;
    },
    //点击添加按钮实现的逻辑
    addTodo() {
      //向父组件发送事件并传入对象数据
      //将content内容拿出来并组合成数据
      this.$emit("addTodo", {
        id: new Date().getTime(),
        content: this.content,
        completed: false,
      });

      // console.log(this.$refs);
      //保存着todoInput组件的实例{todoInput: VueComponent}

      //清除input里面的内容
      this.$refs.todoInput.reset();
    },
  },
};
</script>